import React, {Component} from 'react';
import axios from "axios";
import "../css/show.scss"
class Show extends Component {
	constructor(props) {
		super(props);
		this.state={
			list:[]
		}
	}
	componentDidUpdate(newProps) {
		if(this.props.location.search!==newProps.location.search) {
			let tab=this.props.location.search || "all"
			axios.get("https://cnodejs.org/api/v1/topics/"+tab).then((res)=>{
				this.setState({
					list:res.data.data
				})
				console.log(this.state.list)
			})
		}
	}

	render() {
		return (
			<ul id="ul">
				{
					this.state.list.map((item)=>{
						return(
							<li key={item.id}>
								<div>
									<img src={item.author.avatar_url} width="20"/>
									<span>{item.reply_count}</span>
									<span>/</span>
									<span>{item.visit_count}</span>
									{
										item.good?<span>精华</span>:""
									}
									{
										item.tab==="share"?<span>分享</span>:''
									}
									{
										item.tab==="ask"?<span>问答</span>:''
									}
									{
										item.top?<span>置顶</span>:''
									}
									<span>{item.title}</span>
								</div>
								<div>
									<div>
										<img src={item.author.avatar_url} width="30"/>
									</div>
									<div>{item.last_reply_at}</div>
								</div>
							</li>
							)
					})
				}
			</ul>
		);
	}
}

export default Show;